<template>
  <!-- <div class="logincontainer">

  </div> -->
  <div class="isBody">
    <div class="container right-panel-active">
      <!-- Sign Up -->
      <div class="container__form container--signup">
        <el-form ref="loginForm" class="loginForm" :model="loginForm" :inline="false" size="normal" :rules="rules">
          <el-form-item>
            <div class="loginTitle">系统登录</div>
          </el-form-item>
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item prop="Vscode">
            <div class="Vscode">
              <el-input v-model="loginForm.Vscode" class="Vscode_input" type="string" placeholder="请输入验证码" maxlength="4" />
              <el-image class="Vscode_image" style="width: 120px; height: 50px" src="https://oss-joywork.oss-cn-beijing.aliyuncs.com/kuangshan/code/55afbd0abb9cf0479eba12b13e4d7f0.png" fit="cover" />
            </div>

          </el-form-item>
          <el-form-item />
          <div class="centerLgoin">
            <div class="buttomDiv hvr-bounce-to-right" @click="handlerLogin">登录</div>
          </div>
        </el-form>
      </div>
      <!-- Sign In -->
      <div class="container__form container--signin">
        <svg class="svg-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 111.27 107.59">
          <path class="cls-1" d="M33.74,92a8,8,0,1,0,0,16H89a8,8,0,1,0,0-16H33.74ZM89,111.65H33.74a11.59,11.59,0,1,1,0-23.17H89a11.59,11.59,0,1,1,0,23.17h0Z" transform="translate(-4.37 -4.71)" />
          <path class="cls-1" d="M35.52,97.39a2.67,2.67,0,1,0,2.67,2.67,2.68,2.68,0,0,0-2.67-2.67m0,8.91a6.24,6.24,0,1,1,6.24-6.24,6.24,6.24,0,0,1-6.24,6.24" transform="translate(-4.37 -4.71)" />
          <path class="cls-1" d="M87.21,97.39a2.67,2.67,0,1,0,2.67,2.67,2.68,2.68,0,0,0-2.67-2.67m0,8.91a6.24,6.24,0,1,1,6.24-6.24,6.24,6.24,0,0,1-6.24,6.24" transform="translate(-4.37 -4.71)" />
          <path class="cls-1" d="M41.15,102.73H81.58a6.2,6.2,0,0,1,0-5.35H41.15a6.2,6.2,0,0,1,0,5.35h0Zm-4.74,1.69h0Zm49.91,1.87H36.41a1.78,1.78,0,0,1-1.78-1.78,1.88,1.88,0,0,1,1.43-1.84,2.67,2.67,0,0,0,0-5.24,1.78,1.78,0,0,1-1.43-1.75,1.86,1.86,0,0,1,1.78-1.87H86.32a1.78,1.78,0,0,1,1.78,1.78,1.88,1.88,0,0,1-1.43,1.84,2.67,2.67,0,0,0,0,5.24,1.78,1.78,0,0,1,1.43,1.75,1.86,1.86,0,0,1-1.78,1.87h0Z" transform="translate(-4.37 -4.71)" />
          <g class="excavator-body">
            <path class="cls-1" d="M54.24,88.48H68.5V86.69H54.24v1.78Zm16,3.56H52.46a1.78,1.78,0,0,1-1.78-1.78V84.91a1.78,1.78,0,0,1,1.78-1.78H70.28a1.78,1.78,0,0,1,1.78,1.78v5.35A1.78,1.78,0,0,1,70.28,92h0Z" transform="translate(-4.37 -4.71)" />
            <path class="cls-1" d="M25.72,83.13H75.63V63.87a9.26,9.26,0,0,0-9.25-9.25H52.46a1.79,1.79,0,0,0-1.79,1.79V70.65a1.78,1.78,0,0,1-1.78,1.78H29.43a3.71,3.71,0,0,0-3.71,3.71v7Zm51.69,3.57H23.94a1.78,1.78,0,0,1-1.78-1.78V76.14a7.28,7.28,0,0,1,7.27-7.27H47.11V56.4A5.36,5.36,0,0,1,52.46,51H66.37A12.82,12.82,0,0,1,79.19,63.87v21a1.78,1.78,0,0,1-1.78,1.78h0Z" transform="translate(-4.37 -4.71)" />
            <path class="cls-1" d="M25.72,76h7.07a3.63,3.63,0,0,0,3.62-3.56h-7A3.71,3.71,0,0,0,25.72,76m7.07,3.56H23.94a1.78,1.78,0,0,1-1.78-1.78V76.14a7.28,7.28,0,0,1,7.27-7.27H38.2A1.78,1.78,0,0,1,40,70.65v1.73a7.19,7.19,0,0,1-7.18,7.18" transform="translate(-4.37 -4.71)" />
            <path class="cls-1" d="M59.58,54.61v11a5.48,5.48,0,0,0,3.6,5.14l12.44,4.53V63.87a9.35,9.35,0,0,0-4.11-7.71,9.57,9.57,0,0,0-5.43-1.55h-6.5Zm17.82,25a1.76,1.76,0,0,1-.61-0.11L62,74.06A9.06,9.06,0,0,1,56,65.57V52.83A1.78,1.78,0,0,1,57.8,51h8.28a13.1,13.1,0,0,1,7.44,2.17,12.91,12.91,0,0,1,5.67,10.65V77.78a1.78,1.78,0,0,1-1.78,1.78h0Z" transform="translate(-4.37 -4.71)" />
            <path class="cls-1" d="M60.5,47.56A1.78,1.78,0,0,1,60.27,44l15.1-2L74.53,28.93A1.78,1.78,0,0,1,76.08,27l11.59-1.48-0.78-9.88a1.78,1.78,0,0,1,3.55-.28L91.36,27a1.78,1.78,0,0,1-1.55,1.91L78.19,30.37l0.84,13a1.78,1.78,0,0,1-1.54,1.88L60.74,47.54l-0.24,0" transform="translate(-4.37 -4.71)" />
            <path class="cls-1" d="M97.48,8.27A3.56,3.56,0,1,0,101,11.84a3.57,3.57,0,0,0-3.56-3.56m0,10.69a7.13,7.13,0,1,1,7.13-7.13A7.14,7.14,0,0,1,97.48,19" transform="translate(-4.37 -4.71)" />
            <path class="cls-1" d="M58,51h8.34a12.48,12.48,0,0,1,2.85.33l24.9-33.29a7.23,7.23,0,0,1-2.82-2.74Zm11.88,4.17a1.82,1.82,0,0,1-.57-0.09,9.25,9.25,0,0,0-3-.51H53.93a1.78,1.78,0,0,1-1.3-3l38.2-41a1.78,1.78,0,0,1,3.09,1.22,3.53,3.53,0,0,0,3.28,3.53,1.78,1.78,0,0,1,1.28,2.84L71.34,54.5a1.78,1.78,0,0,1-1.43.71h0Z" transform="translate(-4.37 -4.71)" />
            <g class="excavator-hook">
              <path class="cls-1" d="M100.58,54.61H93.45a1.78,1.78,0,1,1,0-3.56h7.13a1.78,1.78,0,1,1,0,3.56" transform="translate(-4.37 -4.71)" />
              <path class="cls-1" d="M97,70.65a7.14,7.14,0,0,1-7.13-7.13,1.78,1.78,0,0,1,3.56,0A3.56,3.56,0,1,0,97,60a1.78,1.78,0,0,1-1.78-1.78l0-41a1.78,1.78,0,0,1,1.78-1.78h0a1.78,1.78,0,0,1,1.78,1.78l0,39.48a7.13,7.13,0,0,1-1.78,14" transform="translate(-4.37 -4.71)" />
            </g>
          </g>
          <path class="cls-1" d="M113.67,112.29H6.33a1.73,1.73,0,1,1,0-3.42H113.67A1.73,1.73,0,1,1,113.67,112.29Z" transform="translate(-4.37 -4.71)" />
          <path class="cls-2 excavator-road" d="M107.25,112.25h-7.17a1.71,1.71,0,1,1,0-3.42h7.17A1.71,1.71,0,1,1,107.25,112.25Z" transform="translate(-4.37 -4.71)" />
        </svg>
      </div>
      <!-- Overlay -->
      <div class="container__overlay">
        <div class="overlay">
          <div class="overlay__panel overlay--left">
            <button id="signIn" class="btn">注册</button>
          </div>
          <div class="overlay__panel overlay--right">
            <button id="signUp" class="btn">登录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { gsap, Sine } from 'gsap'
// import { loginImage } from '@/api/user'
export default {
  // 存储数据的地方，页面需要显示的数据，都需要显示的在data里面定义
  // 双向绑定的
  data () {
    return {
      imgSrc: '',
      // 登录数据域
      loginForm: {
        username: '',
        password: '',
        Vscode: ''
      },
      // 表单验证规则
      rules: {
        username: [
          {
            required: true,
            trigger: 'change',
            message: '请输入用户名'
          }
        ],
        password: [
          {
            required: true,
            trigger: 'change',
            message: '请输入密码'
          }
        ],
        Vscode: [
          {
            required: true,
            trigger: 'change',
            message: '请输入验证码'
          }
        ]
      }
    }
  },
  created () {
    // 获取验证码
    this.loginImage()
  },
  mounted () {
    this.Doing()
    this.switch()
  },
  methods: {
    Doing () {
      gsap.to('.excavator-body', { duration: 0.1, y: '+=1', yoyo: true, repeat: -1 })
      gsap.to('.excavator-body', { duration: 0.1, y: '-=1', yoyo: true, repeat: -1 })
      gsap.to('.excavator-road', { duration: 0.1, x: 145 })
      gsap.to('.excavator-road', { duration: 3, x: -145, repeat: -1 })
      gsap.to('.excavator-hook', { duration: 0, rotation: -10, transformOrigin: '50% 0%' })
      gsap.to('.excavator-hook', { duration: 1, rotation: 10, transformOrigin: '50% 0%', repeat: -1, yoyo: true, ease: Sine.easeInOut })
    },
    // 滑块登录
    switch () {
      // 渲染完毕后 启动滑块登录效果
      const signInBtn = document.getElementById('signIn')
      const signUpBtn = document.getElementById('signUp')
      const container = document.querySelector('.container')

      signInBtn.addEventListener('click', () => {
        container.classList.remove('right-panel-active')
      })

      signUpBtn.addEventListener('click', () => {
        container.classList.add('right-panel-active')
      })
    },
    // 获取验证码
    // async loginImage () {
    //   const ret = await loginImage()
    //   console.log(ret)
    // },
    // 登录提交事件
    handlerLogin () {
      this.$refs.loginForm.validate((valid) => {
        // 2.如果表单验证通过
        if (valid) {
          this.loading = true
          // 3.调用登录
          this.$store
            .dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({
                path: this.redirect || '/',
                query: this.otherQuery
              })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.isBody {
  align-items: center;
  background-color: var(--white);
  background: url('./images/background_oeuhe7.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  height: 100vh;
  place-items: center;
}

.form__title {
  font-weight: 300;
  margin: 0;
  margin-bottom: 1.25rem;
}

.link {
  color: var(--gray);
  font-size: 0.9rem;
  margin: 1.5rem 0;
  text-decoration: none;
}

.container {
  background-color: var(--white);
  border-radius: var(--button-radius);
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  height: var(--max-height);
  max-width: var(--max-width);
  overflow: hidden;
  position: relative;
  width: 100%;
  min-width: 350px;
}

.container__form {
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.6s ease-in-out;
}

.container--signin {
  left: 0;
  width: 50%;
  z-index: 2;
  opacity: 1;
}

.container.right-panel-active .container--signin {
  transform: translateX(100%);
  opacity: 0;
}

.container--signup {
  left: 0;
  opacity: 0;
  width: 50%;
  z-index: 1;
}

.container.right-panel-active .container--signup {
  -webkit-animation: show 0.6s;
  animation: show 0.6s;
  opacity: 1;
  transform: translateX(100%);
  z-index: 5;
}

.container__overlay {
  height: 100%;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: transform 0.6s ease-in-out;
  width: 50%;
  z-index: 100;
}

.container.right-panel-active .container__overlay {
  transform: translateX(-100%);
}

.overlay {
  background-color: var(--lightblue);
  background: url('./images/background_oeuhe7.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: -100%;
  position: relative;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 200%;
}

.container.right-panel-active .overlay {
  transform: translateX(50%);
}

.overlay__panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: absolute;
  text-align: center;
  top: 0;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  width: 50%;
}

.overlay--left {
  transform: translateX(-20%);
}

.container.right-panel-active .overlay--left {
  transform: translateX(0);
}

.overlay--right {
  right: 0;
  transform: translateX(0);
}

.container.right-panel-active .overlay--right {
  transform: translateX(20%);
}

.btn {
  background-color: var(--blue);
  background-image: linear-gradient(
    90deg,
    var(--blue) 0%,
    var(--lightblue) 74%
  );
  border-radius: 20px;
  border: 1px solid var(--blue);
  color: var(--white);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  padding: 0.9rem 4rem;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
}

.form > .btn {
  margin-top: 1.5rem;
}

.btn:active {
  transform: scale(0.95);
}

.btn:focus {
  outline: none;
}

.form {
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 3rem;
  height: 100%;
  text-align: center;
}

.input {
  background-color: #fff;
  border: none;
  padding: 0.9rem 0.9rem;
  margin: 0.5rem 0;
  width: 100%;
}
.container__form {
  display: flex;
  justify-content: center;
  align-items: center;
}

@-webkit-keyframes show {
  0%,
  49.99% {
    opacity: 0;
    z-index: 1;
  }

  50%,
  100% {
    opacity: 1;
    z-index: 5;
  }
}

@keyframes show {
  0%,
  49.99% {
    opacity: 0;
    z-index: 1;
  }

  50%,
  100% {
    opacity: 1;
    z-index: 5;
  }
}
@media (max-width: 750px) {
  .container {
    .loginForm {
      padding: 0px;
      .Vscode {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        grid-template-areas: 'a b';
        justify-items: center;
        gap: 0px 5px;
        .Vscode_image {
          grid-area: b;
        }
        .Vscode_input {
          grid-area: a;
          align-self: center;
        }
      }
    }
  }
}
.loginForm {
  position: relative;
  width: 100%;
  height: 350px;
  border-radius: 10px;
  padding: 20px 35px;
  .loginTitle {
    font-size: 24px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .centerLgoin {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
  }
  .Vscode {
    display: grid;
    grid-template-columns: auto 40%;
    grid-auto-rows: 1fr;
    grid-template-areas: 'a b';
    gap: 0px 20px;
    .Vscode_image {
      grid-area: b;
    }
    .Vscode_input {
      grid-area: a;
      align-self: center;
    }
  }
}
.svg-icon {
  path {
    fill: #f07d00;
  }
}
</style>
<style lang="scss" >
:root {
  /* COLORS */
  --white: #e9e9e9;
  --gray: #333;
  --blue: #0367a6;
  --lightblue: #008997;

  /* RADII */
  --button-radius: 0.7rem;

  /* SIZES */
  --max-width: 758px;
  --max-height: 420px;

  font-size: 16px;
}
</style>
